/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018-12-13 Time: 22:23
 * OrderSweepScurrySave
 * 赶房 {"whsk_Order_Sweep":{"room":"0411","wuserid":"S03","iuserid":"S03","remark":"123456"}}
 */

import React, {Component} from 'react';
import {
    SafeAreaView,
    View,
    Text,
    Image,
    TouchableOpacity,
    ScrollView,
    FlatList,
    Modal, Platform, BackHandler, ToastAndroid, TextInput,
} from 'react-native';
import {connect} from 'react-redux';
import {styles} from './setOOOSScreen.Style'
import DividingLineViewComponent from "../../../component/DividingLineViewComponent/DividingLineViewComponent";
import AntDesign from "react-native-vector-icons/AntDesign";
import FontAwesome from "react-native-vector-icons/FontAwesome"
import DatePicker from 'react-native-datepicker'
import {
    COLOR_FOCUS,
    COLOR_HEADER_END,
    COLOR_HEADER_START, COLOR_LINK,
    COLOR_THEME,
    FONT_COLOR_SUB_TITLE, FONT_COLOR_TITLE,
    FONT_SIZE_TITLE
} from "../../../constant/PHColors";
import BottomButtonView from "../../../component/BottomButtonView/BottomButtonView";
import {FetchStatus} from "../../../configuration/RequestConfiguration";
import {ReturnStatus} from "../../../configuration/ReturnStatus";
import {doDisplayWarnMessage} from "../../../component/Message/Action";
import {SCREEN_WIDTH} from "../../../constant/PHScreen";
import SelectDatePlugIn from "../../custom/selectDateTime/selectDatePlugIn";
import {retrieveLogRecord, retrieveroomooos,setRoomOOOS} from "./Actions";
import {Row, Rows, Table} from "react-native-table-component";
import SelectFromBottomPlugIn from "../../custom/selectFromBottom/selectFromBottomPlugIn";

class setOOOSScreen extends Component {

    static navigationOptions = ({navigation}) => ({
        headerTitle: `封房/解封`,
    });

    // 构造
    constructor(props) {
        super(props);

        let date = new Date();
        let year = date.getFullYear().toString();
        let month = (date.getMonth()+1).toString();
        if(Number(month)<10){
            month = '0'+month
        }
        let day = date.getDate().toString();
        if(Number(day)<10){
            day = '0'+day
        }
        let opdate = year+'-'+month+'-'+day;

        let formJson = {"lock":opdate,"sell":opdate,"status":"OO","reason":"","reason_c":"请选择","remarks":"","r_status":"DI","overbooking":""}

        // 初始状态
        this.state = {
            room:this.props.navigation.getParam("room")?this.props.navigation.getParam("room"):'',
            screenPage:"列表",      //新建 or 编辑 or 解封 or 列表
            checked:require("../../../resource/login/dl_yixuan.png"),
            uncheck:require("../../../resource/login/dl_weixuan.png"),
            reportData:[],
            formJson:formJson,
            showTypePop: false,
        };

        this.tableHeader = ["","房号","房型","封房日期","解封日期","房态","原因","备注"];
        this.tableWidth = [120,70,70,100,100,90,90,160];

        this.opdate = opdate;

        let dateSource = [];
        let reasonSel = []
        this.props.onOOOSReason.map((item,index)=>{
            item.code =  item.code.replace(/^\s*|\s*$/g,"");
            dateSource.push(item.descript1)
            reasonSel.push(item.code)
        });
        console.log(JSON.stringify(dateSource))
        this.reasonArr = dateSource;
        this.reasonSel = reasonSel;
    }

    componentWillReceiveProps(nextProps, nextContext): void {
        let {dispatch} = this.props;


        if (nextProps.onRetrieveroomooos !== this.props.onRetrieveroomooos && nextProps.onRetrieveroomooos.fetchStatus === FetchStatus.Success) {
            if (nextProps.onRetrieveroomooos.RETURN === ReturnStatus.Success) {
                console.log(JSON.stringify(nextProps.onRetrieveroomooos.DATA))

                let rows = nextProps.onRetrieveroomooos.DATA;
                let data = [];
                rows.map((item,index)=>{
                    let data_son = [];
                    data_son.push(
                        <View style={{flexDirection: 'row',justifyContent: 'space-between',alignItems: 'center'}}>
                            <TouchableOpacity style={{width:50,height:30,marginLeft:10,flexDirection: 'row',justifyContent: 'center',alignItems: 'center'}} activeOpacity={0.8} onPress={()=>{
                                let {dispatch} = this.props;
                                let lock = item.lock.substring(0,4)+'-'+item.lock.substring(4,6)+'-'+item.lock.substring(6,8);
                                let sell = item.sell.substring(0,4)+'-'+item.sell.substring(4,6)+'-'+item.sell.substring(6,8);
                                let reason_c = this.reasonArr[this.reasonSel.indexOf(item.reason)];

                                let formJson = {"sn":item.sn,"lock":lock,"sell":sell,"status":item.status,"reason":item.reason,"reason_c":reason_c,"remarks":item.remarks,"r_status":item.r_status}
                                this.setState({
                                    screenPage:"编辑",
                                    formJson:formJson,
                                })
                            }}>
                                <View style={{width:50,height:30,flexDirection: 'row',justifyContent: 'center',alignItems: 'center',backgroundColor:'#6fb3e0'}}>
                                    <Text style={{fontSize:16,color:'#fff'}}>
                                        编辑
                                    </Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity style={{width:50,height:30,marginLeft:10,flexDirection: 'row',justifyContent: 'center',alignItems: 'center'}} activeOpacity={0.8} onPress={()=>{
                                let {dispatch} = this.props;
                                let lock = item.lock.substring(0,4)+'-'+item.lock.substring(4,6)+'-'+item.lock.substring(6,8);
                                let sell = item.sell.substring(0,4)+'-'+item.sell.substring(4,6)+'-'+item.sell.substring(6,8);
                                let reason_c = this.reasonArr[this.reasonSel.indexOf(item.reason)];

                                let formJson = {"lock":lock,"sell":sell,"status":item.status,"reason":item.reason,"reason_c":reason_c,"remarks":item.remarks,"r_status":item.r_status}
                                this.setState({
                                    screenPage:"解封",
                                    formJson:formJson,
                                })
                            }}>
                                <View style={{width:50,height:30,flexDirection: 'row',justifyContent: 'center',alignItems: 'center',backgroundColor:'#6fb3e0'}}>
                                    <Text style={{fontSize:16,color:'#fff'}}>
                                        解封
                                    </Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    );
                    data_son.push(item.room);
                    data_son.push(item.rmtype);
                    data_son.push(item.lock);
                    data_son.push(item.sell);
                    data_son.push(item.status);
                    data_son.push(item.reason);
                    data_son.push(item.remarks);
                    data.push(data_son)
                });

                this.setState({
                    reportData:data,
                })
            } else {
                dispatch(doDisplayWarnMessage(nextProps.onRetrieveroomooos.MSG))
            }
        }

        if (nextProps.onHousekeepingSweepSetStatus !== this.props.onHousekeepingSweepSetStatus && nextProps.onHousekeepingSweepSetStatus.fetchStatus === FetchStatus.Success) {
            if (nextProps.onHousekeepingSweepSetStatus.RETURN === ReturnStatus.Success) {
                this.props.navigation.state.params.callBack()
            } else {
                dispatch(doDisplayWarnMessage(nextProps.onHousekeepingSweepSetStatus.MSG))
            }
        }

        if (nextProps.onSetRoomOOOS !== this.props.onSetRoomOOOS && nextProps.onSetRoomOOOS.fetchStatus === FetchStatus.Success) {
            if (nextProps.onSetRoomOOOS.RETURN === ReturnStatus.Success ||nextProps.onSetRoomOOOS.RETURN===1 ) {
                this.setState({
                    screenPage:"列表",
                })
                this.getRecordLog();
                // this.props.navigation.state.params.callBack();
            } else {
                dispatch(doDisplayWarnMessage(nextProps.onSetRoomOOOS.MSG))
            }
        }




    }

    // 组件渲染后调用
    componentDidMount() {
        let {dispatch} = this.props;

        this.getRecordLog();
    }

    render() {
        let {dispatch} = this.props;
        return (
            <SafeAreaView style={styles.body}>
                <ScrollView style={styles.body}>

                    {/* 地点 */}
                    {
                        (this.state.screenPage !== "列表") && (
                            <View>
                                <View style={{backgroundColor: '#FFF'}}>
                                    <View style={styles.itemHeader}>
                                        <View style={styles.itemHeaderLeft}>
                                            <Text style={styles.itemHeaderText}>
                                                {this.state.room}
                                            </Text>
                                        </View>
                                        <View style={styles.itemHeaderRight}  >
                                            <TouchableOpacity style={{marginLeft:10,marginRight: 5}} activeOpacity={0.8} onPress={() => {
                                                let reg = new RegExp("-","g");
                                                let lock = this.state.formJson.lock.replace(reg,"");
                                                let sell = this.state.formJson.sell.replace(reg,"");

                                                let str = {"ho_rmoo":this.state.formJson,"arg":{}};
                                                str.ho_rmoo.rmstart = this.state.room;
                                                str.ho_rmoo.rmend = this.state.room;
                                                str.ho_rmoo.lock = lock;
                                                str.ho_rmoo.sell = sell;
                                                str.arg.overbooking = this.state.formJson.overbooking;
                                                console.log(JSON.stringify(str))



                                                let {dispatch} = this.props;

                                                if(this.state.screenPage === "新建"){
                                                    dispatch(setRoomOOOS(str,'HousekeepingSetOOOS'));
                                                }else if(this.state.screenPage === "编辑"){
                                                    str.arg = {}
                                                    dispatch(setRoomOOOS(str,'HousekeepingSetOOOSEdit'));
                                                }else if(this.state.screenPage === "解封"){
                                                    str.arg = {}
                                                    dispatch(setRoomOOOS(str,'HousekeepingSetOOOSDelete'));
                                                }

                                            }}>
                                                <Text style={{color:COLOR_LINK}}>
                                                    {
                                                        (this.state.screenPage === "新建") && "保存"
                                                    }
                                                    {
                                                        (this.state.screenPage === "编辑") && "修改"
                                                    }
                                                    {
                                                        (this.state.screenPage === "解封") && "解封"
                                                    }
                                                </Text>
                                            </TouchableOpacity>
                                            <TouchableOpacity style={{marginLeft:10,marginRight: 10}} activeOpacity={0.8} onPress={() => {
                                                this.setState({
                                                    screenPage:"列表"
                                                })
                                            }}>
                                                <Text style={{color:COLOR_LINK}}>
                                                    返回
                                                </Text>
                                            </TouchableOpacity>
                                        </View>
                                    </View>
                                </View>

                                <DividingLineViewComponent lineHeight={1}/>

                                <View style={{backgroundColor: '#FFF'}}>
                                    <View style={{margin: 5,marginLeft:15,flexDirection:'row',height:40,}}>
                                        <View style={{flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center', width: 110}}>
                                            <Text style={{fontSize: 16, marginRight: 20}}>
                                                封房日期
                                            </Text>
                                        </View>
                                        <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: 'auto'}}>
                                            <SelectDatePlugIn defaultDate={this.state.formJson.lock} textStyle={styles.opdateViewStyle} dateBack={(date)=>{
                                                let formJson = this.state.formJson;
                                                formJson.lock = date;
                                                this.setState({
                                                    formJson:formJson,
                                                })
                                            }} />
                                        </View>
                                    </View>
                                    <View style={{margin: 5,marginLeft:15,flexDirection:'row',height:40,}}>
                                        <View style={{flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center', width: 110}}>
                                            <Text style={{fontSize: 16, marginRight: 20}}>
                                                至
                                            </Text>
                                        </View>
                                        <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: 'auto'}}>
                                            <SelectDatePlugIn defaultDate={this.state.formJson.sell} textStyle={styles.opdateViewStyle} dateBack={(date)=>{
                                                let formJson = this.state.formJson;
                                                formJson.sell = date;
                                                this.setState({
                                                    formJson:formJson,
                                                })
                                            }} />
                                        </View>
                                    </View>
                                    <View style={{margin: 5,marginLeft:15,flexDirection:'row',height:40,}}>
                                        <View style={{flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center', width: 110}}>
                                            <Text style={{fontSize: 16, marginRight: 20}}>
                                                房态
                                            </Text>
                                        </View>
                                        <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: 'auto'}}>
                                            <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                                let formJson = this.state.formJson;
                                                formJson.status = "OO";
                                                this.setState({
                                                    formJson:formJson,
                                                })
                                            }}>
                                                <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: 'auto'}}>
                                                    <Image style={{width: 18, height: 18,borderWidth: 1,borderColor:'#CCCCCC',borderRadius:5,}} source={(this.state.formJson.status==="OO"?this.state.checked:this.state.uncheck)}/>
                                                    <Text style={{fontSize: 16, marginLeft: 2}}>
                                                        长修房(OO)
                                                    </Text>
                                                </View>
                                            </TouchableOpacity>
                                            <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                                let formJson = this.state.formJson;
                                                formJson.status = "OS";
                                                this.setState({
                                                    formJson:formJson,
                                                })
                                            }}>
                                                <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: 'auto',marginLeft:10}}>
                                                    <Image style={{width: 18, height: 18,borderWidth: 1,borderColor:'#CCCCCC',borderRadius:5,}} source={(this.state.formJson.status==="OS"?this.state.checked:this.state.uncheck)}/>
                                                    <Text style={{fontSize: 16, marginLeft: 2}}>
                                                        维护房(OS)
                                                    </Text>
                                                </View>
                                            </TouchableOpacity>
                                        </View>
                                    </View>

                                    {
                                        (this.state.screenPage === "新建" || this.state.screenPage === "编辑") && (
                                            <View style={{margin: 5,marginLeft:15,flexDirection:'row',height:40,}}>
                                                <View style={{flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center', width: 110}}>
                                                    <Text style={{fontSize: 16, marginRight: 20}}>
                                                        原因
                                                    </Text>
                                                </View>
                                                <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: 'auto',}}>
                                                    <TouchableOpacity style={{minWidth: 110,}}  activeOpacity={0.8}  onPress={() => this._openTypeDialog()} underlayColor="#a5a5a5">
                                                        <Text style={{fontSize:16}}>{this.state.formJson.reason_c}</Text>
                                                    </TouchableOpacity>
                                                </View>
                                            </View>
                                        )
                                    }


                                    {
                                        (this.state.screenPage === "新建" || this.state.screenPage === "编辑") && (
                                            <View style={{margin: 5,marginLeft:15,flexDirection:'row',height:100,}}>
                                                <View style={{flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-start', width: 110,}}>
                                                    <Text style={{fontSize: 16, marginRight: 20,verticalAlign:'top'}}>
                                                        备注
                                                    </Text>
                                                </View>
                                                <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: SCREEN_WIDTH-130,}}>
                                                    <TextInput
                                                        multiline={true}
                                                        maxLength={100}
                                                        style={{
                                                            fontSize: 16,
                                                            padding: 0,
                                                            height:100,
                                                            width: SCREEN_WIDTH-130,
                                                            textAlignVertical: "top",
                                                        }}
                                                        underlineColorAndroid={'transparent'}
                                                        defaultValue={
                                                            this.state.formJson.remarks
                                                        }
                                                        onChangeText={text => {
                                                            if(text.length>100){
                                                                text = text.substring(0,100)
                                                            }
                                                            let formJson = this.state.formJson;
                                                            formJson.remarks = text;
                                                            this.setState({
                                                                formJson:formJson,
                                                            })
                                                        }}
                                                    />
                                                </View>
                                            </View>
                                        )
                                    }


                                    {
                                        (this.state.screenPage === "新建" || this.state.screenPage === "编辑") && (
                                            <View style={{margin: 5,marginLeft:15,flexDirection:'row',height:40,}}>
                                                <View style={{flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center', width: 110}}>
                                                    <Text style={{fontSize: 16, marginRight: 20}}>
                                                        返回时房态
                                                    </Text>
                                                </View>
                                                <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: 'auto'}}>
                                                    <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                                        let formJson = this.state.formJson;
                                                        formJson.r_status = "CL";
                                                        this.setState({
                                                            formJson:formJson,
                                                        })
                                                    }}>
                                                        <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: 'auto'}}>
                                                            <Image style={{width: 18, height: 18,borderWidth: 1,borderColor:'#CCCCCC',borderRadius:5,}} source={(this.state.formJson.r_status==="CL"?this.state.checked:this.state.uncheck)}/>
                                                            <Text style={{fontSize: 16, marginLeft: 2}}>
                                                                清洁房
                                                            </Text>
                                                        </View>
                                                    </TouchableOpacity>
                                                    <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                                        let formJson = this.state.formJson;
                                                        formJson.r_status = "DI";
                                                        this.setState({
                                                            formJson:formJson,
                                                        })
                                                    }}>
                                                        <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: 'auto',marginLeft:10}}>
                                                            <Image style={{width: 18, height: 18,borderWidth: 1,borderColor:'#CCCCCC',borderRadius:5,}} source={(this.state.formJson.r_status==="DI"?this.state.checked:this.state.uncheck)}/>
                                                            <Text style={{fontSize: 16, marginLeft: 2}}>
                                                                脏房
                                                            </Text>
                                                        </View>
                                                    </TouchableOpacity>
                                                </View>
                                            </View>
                                        )
                                    }


                                    {
                                        (this.state.screenPage === "新建") && (
                                            <View style={{margin: 5,marginLeft:15,flexDirection:'row',height:40,}}>
                                                <View style={{flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center', width: 110}}>
                                                    <Text style={{fontSize: 16, marginRight: 20}}>
                                                        忽略超预定
                                                    </Text>
                                                </View>
                                                <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: 'auto'}}>
                                                    <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                                        let formJson = this.state.formJson;

                                                        if( formJson.overbooking ==="yes"){
                                                            formJson.overbooking = "no";
                                                        }else{
                                                            formJson.overbooking = "yes";
                                                        }
                                                        this.setState({
                                                            formJson:formJson,
                                                        })
                                                    }}>
                                                        <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: 'auto'}}>
                                                            <Image style={{width: 18, height: 18,borderWidth: 1,borderColor:'#CCCCCC',borderRadius:5,}} source={(this.state.formJson.overbooking==="yes"?this.state.checked:this.state.uncheck)}/>
                                                        </View>
                                                    </TouchableOpacity>
                                                </View>
                                            </View>
                                        )
                                    }




                                    <SelectFromBottomPlugIn entityList={this.reasonArr} checkedIndex={this.state.formJson.reason} callback={(i) => {
                                        let formJson = this.state.formJson;
                                        formJson.reason = this.reasonSel[i];
                                        formJson.reason_c = this.reasonArr[i];
                                        this.setState({
                                            formJson:formJson,
                                        })
                                    }} show={this.state.showTypePop} closeModal={(show) => {
                                        this.setState({
                                            showTypePop: show
                                        })
                                    }}/>
                                </View>
                            </View>
                        )
                    }



                    {
                        (this.state.screenPage === "列表") && (
                            <View>
                                <View style={{backgroundColor: '#FFF'}}>
                                    <View style={styles.itemHeader}>
                                        <View style={styles.itemHeaderLeft}>
                                            <Text style={styles.itemHeaderText}>
                                                {this.state.room}
                                            </Text>
                                        </View>
                                        <View style={styles.itemHeaderRight} >
                                            <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                                let formJson = {"lock":this.opdate,"sell":this.opdate,"status":"OO","reason":"","reason_c":"请选择","remarks":"","r_status":"DI","overbooking":""}
                                                this.setState({
                                                    screenPage:"新建",
                                                    formJson:formJson,
                                                })
                                            }}>
                                                <Text style={{color:COLOR_LINK}}>
                                                    新建封房
                                                </Text>
                                            </TouchableOpacity>
                                        </View>
                                    </View>

                                </View>

                                <DividingLineViewComponent lineHeight={1}/>

                                <View style={{backgroundColor: '#FFF'}}>
                                    <ScrollView style={styles.body}>
                                        <FlatList
                                            data={[this.state.reportData]}
                                            keyExtractor={(item, index) => index}
                                            renderItem={this.renderTableItem}
                                            horizontal={true}
                                            showsHorizontalScrollIndicator={false}
                                        />
                                    </ScrollView>
                                </View>
                            </View>
                        )
                    }


                </ScrollView>

            </SafeAreaView>
        )
    }

    _openTypeDialog(){
        this.setState({showTypePop: !this.state.showTypePop})
    }

    getRecordLog(){
        let {dispatch} = this.props;

        let str = " room = '"+this.state.room+"' ";
        dispatch(retrieveroomooos(str));
    }

    renderTableItem=({item})=>{
        let _this = this;
        return(
            <Table style={{marginLeft: 0}}>
                <Row data={_this.tableHeader} widthArr={_this.tableWidth} style={styles.tableHeader} textStyle={styles.tableText}/>
                <Rows data={item} widthArr={_this.tableWidth} style={styles.tableHeader} textStyle={styles.tableText}/>
            </Table>
        )
    }
}

const props = state => {
    return {
        onRetrieveroomooos:state.onRetrieveroomooos,
        onHousekeepingSweepSetStatus: state.onHousekeepingSweepSetStatus,
        onOOOSReason:state.onCache.OOOSReason,
        onSetRoomOOOS:state.onSetRoomOOOS,
    }
}

export default setOOOSScreen = connect(props)(setOOOSScreen);